<template>
  <div class="content_wrapper">
    <div class="content_wrapper_header">
      <UserInfo class="user_info" :user=image.user></UserInfo>
      <PublishTime class="publish_time" :content=image.create_at></PublishTime>
    </div>
    <div class="content_wrapper_body">
      <RouterLink to="/image'">
        <img :src=image.img_url alt="image" class="image">
      </RouterLink>
    </div>
<!--    <div class="content_wrapper_footer">-->
<!--      评论列表-->
<!--    </div>-->
  </div>
</template>

<script>

import UserInfo from "@/components/common/UserInfo";
import PublishTime from "@/components/common/PublishTime";

export default {
  name: "ImageItem",
  data() {
    return {}
  },
  props: {
    image: {
      type: Object,
      default() {
        return {}
      }
    },
    create_at: {
      type: String,
      default() {
        return "";
      }
    },
    user: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    PublishTime,
    UserInfo,
  },
}
</script>

<style scoped>
.content_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50vw;
  /*height: 60vw;*/
  background-color: white;
  margin-bottom: 5%;

  border: solid;
}

.content_wrapper_header {
  flex: 1;
  border: solid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
}

.content_wrapper_body {
  flex: 7;
  border: solid;
}

.content_wrapper_footer {
  flex: 2;
  border: solid;
  width: 100%;
}

.publish_time {
  display: inline;
  justify-self: end;
  margin-right: 30px;
}

.image {
  width: 40vw;
  height: 40vw;
}
</style>